<template>
  <div>
    <x-header>新UI规范组件Demo</x-header>
    <div class="body-box">
      <div>
        <gz-code-input placeholder="请输入">
          <!-- <template slot="suffix">
            <x-button>发送</x-button>
          </template> -->
        </gz-code-input>
        <div class="title">Input输入框</div>
        <div class="component-box">
          <div class="sub-title">默认</div>
          <gz-input placeholder="请输入" inputStyle="notBorder"></gz-input>
        </div>
        <div class="component-box">
          <div class="sub-title">激活</div>
          <gz-input placeholder="请输入" focus></gz-input>
        </div>
        <div class="component-box">
          <div class="sub-title">已输入</div>
          <gz-input v-model="enter" placeholder="请输入"></gz-input>
        </div>
        <div class="component-box">
          <div class="sub-title">输入错误</div>
          <gz-input
            placeholder="请输入"
            :validate="{ required: true }"
          ></gz-input>
        </div>
        <div class="component-box">
          <div class="sub-title">禁止输入</div>
          <gz-input placeholder="禁止输入" :disabled="true"></gz-input>
        </div>
        <div class="component-box">
          <div class="sub-title">禁止编辑</div>
          <gz-input v-model="notEdit" placeholder="" readonly></gz-input>
        </div>
        <div class="component-box">
          <div class="sub-title">带后缀</div>
          <gz-input placeholder="请输入">
            <template slot="suffix">
              <div class="suffix-box">万元</div>
            </template>
          </gz-input>
        </div>
      </div>
      <div class="mt20">
        <div class="title">Button按钮组</div>
        <div class="component-box">
          <div class="sub-title">退出</div>
          <gz-button type="default" @click="handleClick('quit')"
            >退出</gz-button
          >
        </div>
        <div class="component-box">
          <div class="sub-title">产品详情JSbridge方法调用</div>
          <gz-button type="default" @click="handleClick('cpxq')"
            >产品详情</gz-button
          >
        </div>
        <div class="component-box">
          <div class="sub-title">默认</div>
          <gz-button type="default" @click="handleClick">次按钮</gz-button>
        </div>
        <div class="component-box">
          <div class="sub-title">主按钮</div>
          <gz-button type="primary" @click="handleClick">主按钮</gz-button>
        </div>
        <div class="component-box">
          <div class="sub-title">警告按钮</div>
          <gz-button type="warn" @click="handleClick">警告按钮</gz-button>
        </div>
        <div class="component-box">
          <div class="sub-title">禁用按钮</div>
          <gz-button type="primary" disabled @click="handleClick"
            >禁用按钮</gz-button
          >
        </div>
      </div>

      <div class="mt20">
        <div class="title">Picker选择器</div>
        <div class="component-box">
          <div class="sub-title">默认</div>
          <gz-picker v-model="pickerData" :dataList="dataList">
            <template #title>
              <div>划算</div>
            </template>
          </gz-picker>
        </div>
      </div>

      <div class="mt20">
        <div class="title">时间选择器</div>
        <div class="component-box">
          <div class="sub-title">默认</div>
          <gz-date clearText="请选择日期" v-model="currDate"></gz-date>
        </div>
      </div>

      <div class="mt20">
        <div class="title">地址选择器</div>
        <div class="component-box">
          <div class="sub-title">默认</div>
          <gz-pickerAddress v-model="address"></gz-pickerAddress>
          <!-- 参数配置 backDataType 返回数组的内容  name名称  value 代码值  默认 代码值+名称 -->
        </div>
      </div>

      <div class="mt20">
        <div class="title">checkBox选择框</div>
        <div class="component-box">
          <div class="sub-title">默认</div>
          <div class="mt10">
            <gz-checker v-model="checkerArr[0]" :title="'激活'"></gz-checker>
          </div>
          <div class="mt10">
            <gz-checker v-model="checkerArr[1]" :title="'默认'"></gz-checker>
          </div>
          <div class="mt10">
            <gz-checker
              v-model="checkerArr[2]"
              :title="'禁用'"
              disabled
            ></gz-checker>
          </div>
        </div>
      </div>

      <div class="mt20">
        <div class="title">radio选择框</div>
        <div class="component-box">
          <div class="sub-title">默认</div>
          <div class="mt10">
            <gz-radio
              :dataList="radioTitelList"
              v-model="radioCheck"
              name="radioName"
              @handleChange="getRadioVlaue"
              inline
            ></gz-radio>
          </div>
        </div>
      </div>

      <div class="mt20">
        <div class="title">图片上传</div>
        <div class="component-box">
          <div class="sub-title">默认</div>
          <div class="mt10">
            <gz-img-upload @getFiles="getFilesList" showName></gz-img-upload>
            <!-- showName属性 是否展示选中图片的名字 -->
          </div>
        </div>
      </div>
      <div class="mt20">
        <div class="title">人脸识别</div>
        <div class="component-box">
          <div class="sub-title">默认</div>
          <div class="mt10">
            <gz-face-verification
              type="primary"
              triggerMode="click"
              @getverification="getVerification"
              :identityinfo="{ idCard: '522724198811083137', name: '曾辉' }"
              >开启人脸识别</gz-face-verification
            >
            <!-- 按钮的风格 type：String   backUrl: String 验证完成后返回的地址
	  			 identityInfo:object {idCard: '',
	  				name: ''}   getVerification：监听验证结果 -->
          </div>
        </div>
      </div>

      <div class="mt20">
        <div class="title">OCR上传</div>
        <div class="component-box">
          <div class="sub-title">默认</div>
          <div class="mt10">
            <OCRUpload></OCRUpload>
          </div>
        </div>
      </div>

      <div class="mt20">
        <div class="title">信息录入</div>
        <div class="component-box">
          <div class="sub-title">默认</div>
          <div class="mt10">
            <gz-type-in-data></gz-type-in-data>
          </div>
        </div>
      </div>

      <div class="mt20">
        <div class="title">拍照</div>
        <div class="component-box">
          <div class="sub-title">默认</div>
          <div class="mt10">
            <ab-upload></ab-upload>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  gzInput,
  gzButton,
  gzPicker,
  gzChecker,
  OCRUpload,
  gzDate,
  gzRadio,
  gzPickerAddress,
  gzImgUpload,
  gzFaceVerification,
  gzTypeInData,
  gzCodeInput,
} from "@/components/customize";
import abUpload from "@/components/form/abUploadGz";
export default {
  components: {
    gzInput,
    gzButton,
    gzPicker,
    gzChecker,
    OCRUpload,
    gzDate,
    gzRadio,
    gzPickerAddress,
    gzImgUpload,
    gzFaceVerification,
    gzTypeInData,
    gzCodeInput,
    gzTypeInData,
    abUpload,
  },
  watch: {},
  data() {
    return {
      enter: "已输入",
      notEdit: "禁止编辑",
      pickerData: ["哈哈"],
      address: [],
      currDate: "",
      dataList: [["哈哈", "呵呵", "嘿嘿", "桀桀"]],
      checkerArr: [true],
      radioCheck: "0",
      radioTitelList: [
        {
          label: "默认",
          value: "0",
          disabled: false,
        },
        {
          label: "激活",
          value: "1",
          disabled: false,
        },
        {
          label: "禁用",
          value: "2",
          disabled: true,
          ischecked: true,
        },
      ],
    };
  },
  mounted() {},
  methods: {
    handleClick(type) {
      if (type == "quit") {
        let params1 = {
          method: "quit",
          nextStage: "",
        };
        this.$bridge.nativeFunc(params1, (response) => {
          console.log("quit =>", response);
          this.$vux.toast.show({
            text: response,
            type: "text",
          });
          // if (response) {
          //   let ocrInfo = JSON.parse(response);
          //   that.setOcrInfo(ocrInfo);
          // }
        });
      } else if (type == "cpxq") {
        let params = {
          method: "WdProducInfo",
          prodCode: "test",
          repayList: [
            { value: "01", text: "等额本息还款" },
            { value: "03", text: "按月还息，到期还本" },
          ],
          lendDate: [
            { value: 3, name: "3月" },
            { value: 6, name: "6月" },
            { value: 9, name: "9月" },
            { value: 12, name: "12月" },
            { value: 24, name: "24月" },
            { value: 36, name: "36月" },
          ],
          pdfTypeList: [
            { value: 0, text: "贵州银行农户类贷款业务借款合同（网络版）" },
            { value: 1, text: "农户类贷款资金用途承诺书" },
          ],
          loanGuaranteList: [
            { value: 0, text: "信用" },
            { value: 1, text: "抵押" },
          ],
          lendLoanType: [
            { value: "104", text: "购商业用车" },
            { value: "109", text: "生产经营" },
            { value: "199", text: "其他个人贷款用途" },
          ],
        };
        console.log("WdProducInfo.params => ", params);
        this.$bridge.nativeFunc(params, (response) => {
          console.log("WdProducInfo =>", response);
          this.$vux.toast.show({
            text: response,
            type: "text",
          });
          // if (response) {
          //   let ocrInfo = JSON.parse(response);
          //   that.setOcrInfo(ocrInfo);
          // }
        });
      }
    },
    getDate(dt) {
      console.log(dt);
    },
    getRadioVlaue(val) {
      ///获取单选按钮的值
      // this.radioCheck = val
      console.log(val);
    },
    getFilesList(list) {
      console.log(list);
    },
    getVerification(data) {
      //获取验证结果  ErrMsg Sim ErrCode
      console.log(data);
    },
  },
};
</script>

<style scoped>
.body-box {
  padding: 20px;
}

.title {
  font-size: 18px;
  color: #101010;
  font-weight: bold;
}

.sub-title {
  font-size: 16px;
  color: #2f2f2f;
  font-weight: 400;
  margin: 15px 0 10px 0;
}

.suffix-box {
  flex-shrink: 0;
  font-size: 16px;
  color: #2f2f2f;
  margin-left: 10px;
}
</style>
